<!DOCTYPE html>
<html>
  <head>
    <title>ws-topic</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
  </head>
  <body>
	<div>  
	    <p id="response"></p>
	</div>
	
  </body>
</html>
<!-- 独立JS -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js" charset="utf-8"></script>
<script>
var stompClient = null;	
    //加载完浏览器后  调用connect（），打开双通道
    $(function(){	
		//打开双通道
		connect()
    })
	
    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function() {
    	disconnect()
    }
    function connect(){
        var socket = new SockJS('http://127.0.0.1:8089/ws'); //连接SockJS的endpoint名称为"ws"
        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
        stompClient.connect({},function(frame){//连接WebSocket服务端     
            console.log('Connected:' + frame);
            //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
            stompClient.subscribe('/topic/ssbj',function(response){
                var message = JSON.parse(response.body);
				var response = $("#response");
				var html = "<p>"+message.name+"</p>";
				html += "<p>"+message.conent+"</p>";
				html += "<hr/>";
				response.append(html);
            });
        });
    }
 
    //关闭双通道
    function disconnect(){
        if(stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected:关闭双通道");
    }
</script>
